<template>
    <!-- 商品楼层 -->
    <div>
        <div class="floor">
            <h2 :class="{h2A:foolNumber==1,h2B:foolNumber==2,h2C:foolNumber==3}">
                <span>{{foolNumber}}F</span>
                {{floorName}}
            </h2>
            <div class="floor-anomaly">
                <div class="floor-anomaly-one"><img :src="floor[0].image" alt="" width="100%" height="100%"></div>
                <div class="floor-anomaly-two">
                    <div><img :src="floor[1].image" alt="" width="100%" height="100%"></div>
                    <div><img :src="floor[2].image" alt="" width="100%" height="100%"></div>
                </div>
            </div>
            <div class="floor-rule">
                <div v-for="(item,index) in floor.slice(3)" :key="index">
                    <img :src="item.image" alt="" width="100%">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:['floorName','foolNumber','floor'],
    data(){
        return {

        }
    },
    created(){

    }
}
</script>

<style scoped>
.floor img{
    display:block;
}
.floor h2{
    text-align:center;
    font-size:.85rem;
    font-weight:100;
    line-height:2.5rem;
}
.floor h2 span{
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    /* background: #F60; */
    border-radius:100%;
    text-align:center;
    font-size:.7rem;
    line-height:1.35rem;
    margin-right:3px;
}
.h2A{
    color:#da3e1c;
}
.h2A span{
    background: #da3e1c;
    color:#FFF;
}
.h2B{
    color:#57dd30;
}
.h2B span{
    background: #57dd30;
    color:#FFF;
}
.h2C{
    color:#ea5cff;
}
.h2C span{
    background: #ea5cff;
    color:#FFF;
}
.floor-anomaly{
    display: flex;
    flex-direction:row;
}
.floor-anomaly div{
    width: 10rem;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.floor-anomaly-one{
    border-right:1px solid #eee;
    border-bottom: 1px solid #eee;
}
.floor-anomaly-two div{
    border-bottom: 1px solid #eee;
}
.floor-rule{
    display: flex;
}
.floor-rule div{
    width: 10rem;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-bottom: 1px solid #eee;
}
.floor-rule div:nth-child(odd){
    border-right:1px solid #eee;
}
</style>